<template>
            <el-aside :width="menuOC ? '64px' : '190px'">
                <el-menu
                    :router="true"
                    :unique-opened="true"
                    :default-active="$route.path"
                    :collapse="menuOC"
                    :collapse-transition="false"
                    background-color="#413142"
                    text-color="#fff"
                    active-text-color="#1495e7"
                >
                    <el-tooltip :content="menuOC ? '展开' : '收缩'" placement="bottom-start" offset="1000">
                        <el-button 
                            id="MenuBut" 
                            :class="menuOC ? 'el-icon-d-arrow-right' : 'el-icon-arrow-down'" 
                            @click="showMenuBut"
                        >
                        </el-button>
                    </el-tooltip>
                    <el-submenu :index="item.id | numToStr" v-for="item in menuList" :key="item.id" >
                        <template slot="title">
                            <div @click="giveTitle(item)" :class="menuOC ? '' :'menuBar1'">
                                <i :class="menuBar1Icon[item.id]"></i>
                                <span>{{item.authName}}</span>
                            </div>
                        </template>
                        <el-menu-item :index="childItem.path | add92" v-for="childItem in item.children" :key="childItem.id">
                            <template slot="title">
                                <div @click="giveChildTitle(childItem)" class="menuBar2">
                                    <i :class="menuBar1Icon[childItem.id]"></i>
                                    <span>{{childItem.authName}}</span>
                                </div>
                            </template>
                        </el-menu-item>
                    </el-submenu>
                </el-menu>
            </el-aside>
</template>

<script>
export default({
    name:"homeaside",
    data(){
        return{
            menuOC:false,
            menuList: [],
            menuBar1Icon: {
                '125': 'el-icon-s-custom',
                '110': 'el-icon-user-solid',
                '103': 'el-icon-lock',
                '111': 'el-icon-thumb',
                '112': 'el-icon-unlock',
                '101': 'el-icon-s-shop',
                '104': 'el-icon-shopping-cart-full',
                '115': 'el-icon-shopping-bag-1',
                '121': 'el-icon-present',
                '102': 'el-icon-s-order',
                '107': 'el-icon-tickets',
                '145': 'el-icon-s-data',
                '146': 'el-icon-data-analysis',
            }
            
        }
    },
    created(){
        this.getMenuList()
    },
    methods: {
        async getMenuList(){
            const { data : res } = await this.$http.get('menus');
            if(res.meta.status == 200){
                this.menuList = res.data;
            }else{
                return this.$message(
                    {
                        center:true,
                        showClose: true,
                        type: 'error',
                        duration:2000,
                        message: '获取导航菜单失败'
                    }
                )                
            }
        },
        giveTitle(value){
            this.$store.commit('giveHeaderTitle',value);
        },
        giveChildTitle(value){
            this.$store.commit('giveHeaderChildTitle',value);
        },
        showMenuBut(){
            this.menuOC = !this.menuOC;
        }
    },

    filters: {
        numToStr(value){
            if(value){
                return value.toString();
            }
        },
        add92(value){
            if(value){
                return '/' + value;
            }
        }
    }
})
</script>

<style lang="less" scoped>
    .el-aside{
        overflow: hidden;
        background-color: #413142;
        text-align: center;
        .el-button{
            color: #fff;
        }
        #MenuBut{
            width: 100%;
            height: 30px;
            border:none;
            border-radius:0;
            background-color: #3a2c3b;
            padding: 0;
            cursor: pointer;
        }  
        .el-menu{
            border: none;
            .menuBar1{
                width: 110px;
                padding-right: 60px;
                font-weight: bold;
                i{
                    margin-right: 8px;
                }
            }
            .menuBar2{
                width: 100px;
                padding-right: 50px;
                i{
                    margin-right: 5px;
                }
            }
        }
    }
</style>